@(sessionData: util.UserSession, query: String, files: List[collectors.file.models.FileInfo], events: List[collectors.calendar.models.Event], emails:List[collectors.email.models.GmailEmail] , people:List[collectors.people.models.PeopleUser.FacebookData])

@content = {

<div class="navbar navbar-fixed-top">
	
	<div class="navbar-inner">
		
		<div class="container">
			
			<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
				<span class="icon-bar"></span> 
				<span class="icon-bar"></span> 
				<span class="icon-bar"></span> 				
			</a>
			
			<a class="brand" href="@routes.Application.index()">[YOU]</a>
			
			<div class="nav-collapse">
			<!--  -->
				<ul class="nav pull-right">
					<li>
						<a href="#"><span class="badge badge-warning">7</span></a>
					</li>
					
					<li class="divider-vertical"></li>
					
					<li class="dropdown">
						
						<a data-toggle="dropdown" class="dropdown-toggle " href="#">
							@{sessionData.getUser().username}<b class="caret"></b>							
						</a>
						
						<ul class="dropdown-menu">
							<li>
								<a href="./account.html"><i class="icon-user"></i> Account Setting  </a>
							</li>
							
							<li>
								<a href="./change_password.html"><i class="icon-lock"></i> Change Password</a>
							</li>
							
							<li class="divider"></li>
							
							<li>
								<a href="@routes.Application.logout()"><i class="icon-off"></i> Logout</a>
							</li>
						</ul>
					</li>
				</ul>
				
			</div> <!-- /nav-collapse -->
			
		</div> <!-- /container -->
		
	</div> <!-- /navbar-inner -->
	
</div> <!-- /navbar -->




<div id="content">
	
	
	<div class="container">
		
		<div class="row">
			
			<div class="span3">
				
				<div class="account-container">
				
					<div class="account-avatar">
						<!--  <img src="@routes.Assets.at("img/headshot.png")" alt="" class="thumbnail" /> -->
   					 	<img src="@{sessionData.getUser().pictureUrl}" alt="" class="thumbnail" />
					</div> <!-- /account-avatar -->
				
					<div class="account-details">
					
						<span class="account-name">@{sessionData.getUser().username}</span>
						
						<span class="account-actions">
							<a href="javascript:;">Profile</a> |
							
							<a href="javascript:;">Edit Settings</a>
						</span>
					
					</div> <!-- /account-details -->
				
				</div> <!-- /account-container -->
				
				<hr />
				
				<ul id="main-nav" class="nav nav-tabs nav-stacked">
					
					<li>
						<a href="@routes.Connect.index()">
							<i class="icon-cogs"></i>
							Connect 		
						</a>
					</li>
					
					<li class="active">
						<a href="@routes.Search.index()">
							<i class="icon-search"></i>
							Search	
						</a>
					</li>
					
					<li>
						<a href="@routes.Focus.index()">
							<i class="icon-pushpin"></i>
							Focus		
						</a>
					</li>
					
					<!-- 
					<li>
						<a href="./grid.html">
							<i class="icon-th-large"></i>
							Grid Layout	
							<span class="label label-warning pull-right">5</span>
						</a>
					</li>
					<li>
						<a href="./charts.html">
							<i class="icon-signal"></i>
							Charts	
						</a>
					</li>
					
					<li>
						<a href="./account.html">
							<i class="icon-user"></i>
							User Account							
						</a>
					</li>
					
					<li>
						<a href="./login.html">
							<i class="icon-lock"></i>
							Login	
						</a>
					</li>
					 -->
				</ul>	
				
				<hr />
				<!-- 
				<div class="sidebar-extra">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
				</div> <!-- .sidebar-extra -->
				
				<br />
		
			</div> <!-- /span3 -->
			
			
			
			<div class="span9">
				
				<h1 class="page-title">
					[YOU]: The Social Machine that wrapps you					
				</h1>
				
				<div class="widget">
														
					<div class="widget-content">
						
						<h3>Search...</h3>
									
						<div class="faq-container">
							<form class="faq-search" method="post" action="@routes.Search.search()">
								<input type="text" name="q" placeholder="Search by Keyword">
							</form>
						</div>
							
						<div class="faq-container">
							<h3>[PeopleYOU] - @people.size() Results for "@query"</h3>
							
							@for((fbuser, index) <- people.zipWithIndex){
							<ol class="faq-list">
								<li id="faq-@index">
									<div class="faq-icon">
										<div class="faq-number">@{index+1}</div>
									</div>
									<div class="faq-icon">
										<input type="image" src="@fbuser.pic" alt="Submit">
									</div>
									<div class="faq_text">
										<a target="new" href="http://www.facebook.com/@fbuser.username"><h4> @fbuser.name</h4></a>
									</div>
									</li>
							</ol>
							}
						</div>

						<div class="faq-container">
						<h3>[FilYOU] - @files.size() Results for "@query"</h3>
							@for((file, index) <- files.zipWithIndex){
							<ol class="faq-list">
								<li id="faq-@index">
									<div class="faq-icon">
										<div class="faq-number">@{index+1}</div>
									</div>
									
									@****************************************
									<div class="faq-icon">
										@if(file.isDir()) {
											<img alt="" src="@routes.Assets.at("/img/folder-icon.png")">
										} else {
	  										<img alt="" src="@routes.Assets.at("/img/file-icon.png")">
										}
									</div> **************@
									
									<div class="faq-icon">
										@if(file.isDir()) {
											@*
											<form class="one-button" method="post" action="@routes.Download.download()">
												<input type="hidden" name="path" value="@file.getPath()">
												<input type="image" src="@routes.Assets.at("/img/folder-icon.png")" alt="Submit">
											</form>
											*@
											<img alt="Keep calm. Not working yet!" src="@routes.Assets.at("/img/folder-icon.png")">
										} else {
	  										<form class="one-button" method="post" action="@routes.Download.download()">
												<input type="hidden" name="path" value="@file.getPath()">
												<input type="image" src="@routes.Assets.at("/img/file-icon.png")" alt="Submit">
											</form>
										}
									</div>
									
									<div class="faq_text">
										<h4> @file.getName()</h4>
										<p>Size: @file.getSize(); <br>
										Internal Path: @file.getPath();<br>
										Is a folder? @file.isDir();
									</div>
									</li>
							</ol>
							}
						</div>
						<div class="faq-container">
							<h3>[CalendaYOU] - @events.size() Results for "@query"</h3>
							
							@for((event, index) <- events.zipWithIndex){
							<ol class="faq-list">
								<li id="faq-@index">
									<div class="faq-icon">
										<div class="faq-number">@{index+1}</div>
									</div>
									
									<div class="faq-icon">
										<input type="image" src="@routes.Assets.at("/img/calendar-icon.png")" alt="Submit">
									</div>
									<div class="faq_text">
										<a target="new" href="@event.getHtmlLink()"><h4> @event.getSummary()</h4></a>
										<h5>@event.getDateString()</h5>
										Local: @event.getLocation(); <br>
									</div>
									</li>
							</ol>
							}
						</div>	
						
						<div class="faq-container">
							<h3>[EmaYOU] - @emails.size() Results for "@query"</h3>
							
							@for((email, index) <- emails.zipWithIndex){
							<ol class="faq-list">
								<li id="faq-@index">
									<div class="faq-icon">
										<div class="faq-number">@{index+1}</div>
									</div>
									
									<div class="faq-icon">
										<input type="image" width="50" height="50" src="@routes.Assets.at("/img/gmail-small.png")" alt="Submit">
									</div>
									<div class="faq_text">
										<h5>@email.subject</h5>
										<p>From: @email.from</p>
										<p>@Html(email.content)</p>
									</div>
									</li>
							</ol>
							}
						</div>
										
					</div> <!-- /widget-content -->
					
				</div>
				
			</div> <!-- /span9 -->
			
			
		</div> <!-- /row -->
		
	</div> <!-- /container -->
	
</div> <!-- /content -->
					
	
<div id="footer">
	
	<div class="container">				
		<hr>
	</div> <!-- /container -->
	
</div> <!-- /footer -->

}


@footer = {}

@main("[YOU]")(content)(footer)
